
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import {InputItem, List, Picker, ImagePicker, TextareaItem, WhiteSpace, Button, WingBlank, NavBar, Modal} from "antd-mobile";
import * as React from "react";

import {Control} from "react-keeper";
import lrz from 'lrz';

import './PageMyIntroduce.less';
import Actions from './Actions';
import Store from './Store';

import {RECORD} from "../../toupiao/const/Const";
import Utils from "../../../../utils/index";

const Item = List.Item;
const Brief = Item.Brief;

class MyIntroduce extends React.Component {
  constructor(props) {
    super(props);
    this.onRecordChange = this.onRecordChange.bind(this);
    this.onIntroTextChange = this.onIntroTextChange.bind(this);
    this.onImageChange = this.onImageChange.bind(this);
    this.onImageClick = this.onImageClick.bind(this);
    this.saveIntro = this.saveIntro.bind(this);
  }

  componentWillMount() {
    Actions.customInit();
  }

  onRecordChange(val) {
    Actions.onRecordChange(val);
  }

  onIntroTextChange(val) {
    Actions.onIntroTextChange(val);
  }

  onImageChange(files, type, index) {
    switch(type) {
      case 'add':
        if (files) {
          files.forEach((file) => {
            lrz(file.url, {quality:0.1}).then(rst => {
              let fnArr = file.file.name.split('.');
              Actions.addZippedImg([{
                image: {
                  fileName: file.file.name,
                  mediaType: file.file.type,
                  mediaSuffix: fnArr[fnArr.length - 1],
                  medataBase64: rst.base64,
                  mediaId: null
                },
                url: rst.base64,
                orientation: 1,
                ...rst,
              }]);
            }).catch(err => {
              console.log('无法加载该图片')
            });
          })
        }
        break;
      case 'remove':
        Actions.removeImage();
        break;
      default:
        break;
    }
  };

  goHome() {
    Control.replace('/home/my', null);
  }

  saveIntro() {
    Modal.alert('提示', '确认要修改并保存个人信息？', [
      {
        text: '确定',
        onPress: () => {
          Actions.saveIntro();
        },
        style: 'default'},
      {
        text: '取消',
        onPress: () => {
        },
        style: 'default'},
    ]);
  }

  onImageClick(index, fs) {

    let t = this;
    let pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    let items = fs.map((file) => {
      let o = new Image();
      o.src = file.url;
      return {
        src: file.url,
        w: o.width,
        h: o.height
      };
    });

    let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, {index: index});
    gallery.init();
  }

  render() {
    return (
      <div>
        <NavBar
          mode="dark"
          leftContent={<div onClick={() => this.goHome()}>关闭</div>}
          rightContent={<div onClick={() => this.saveIntro()}>保存</div>}
        >个人详情</NavBar>
        <WhiteSpace/>
        <List>
          <InputItem maxLength="18" value={this.state.intro.proprietor.identityCard} editable={false}>身份证号</InputItem>
          <InputItem type="phone" value={this.state.intro.proprietor.phone} editable={false}>手机号码</InputItem>
          <Picker
            title="选择学历"
            cols="1"
            value={[this.state.intro.proprietor.record]}
            onChange={this.onRecordChange}
            data={RECORD}>
            <Item arrow="horizontal">学历</Item>
          </Picker>
          <TextareaItem
            title="个人简介"
            onChange={this.onIntroTextChange}
            value={this.state.intro.proprietor.synopsis}
            placeholder="这家伙很懒，什么都没留下。"
            count="140"
            rows="4"
            clear
          />
        </List>
        <WhiteSpace/>
        <List>
          <Item>
            照片
            <Brief>
              <ImagePicker
                files={this.state.intro.files}
                onChange ={this.onImageChange}
                onImageClick={(index, fs) => this.onImageClick(index, fs)}
                multiple={false}
                selectable={this.state.intro.files.length === 0}
              />
            </Brief>
          </Item>
        </List>
      </div>
    );
  }
}

ReactMixin.onClass(MyIntroduce, Reflux.connect(Store, 'intro'));

export default MyIntroduce ;
